dojo.provide("common.clazz.ConfigXmlMenu");
dojo.require("common.clazz.XmlReader");
dojo.require("dojox.html.styles");

// ********* Main Config Menu ********

/** This is where the Main menu config starts.
 * 1) Provides node access to menu-config.xml.
 * 2) Setup navigation menu for all the Realm(s) in menu-config.xml.
 * The menu is displayed in the Header section of web page.
 */
dojo.declare("common.clazz.ConfigXmlMenu",null,{
/** 
 *<menu>
 * <realm id="grasshopper" name="Grasshopper" url="pages/realm/grasshopper/" />
 * <realm id="cabc" name="CABC" url="pages/realm/cabc/" />
 *</menu>
 * Important: urlMenuConfig = "config/menu-config.xml"
 */
  urlMenuConfig: null, //="config/menu-config.xml";
  menuDoc: null, // Node loaded from urlMenuConfig 

  constructor: function(url_menu_config){
    urlMenuConfig=url_menu_config;
  },
  loadMainMenu: function() {
    var mainMenuReader=new common.clazz.XmlReader(urlMenuConfig);
	mainMenuReader.loadThenCallback(this.processLoadedData);
  },
  processLoadedData: function(loadedData) {
    menuDoc = loadedData;
	var menuBar = dijit.byId("realmMenuId");
	
    //Setup a clickable menu item for each of the Realm(s) in the menu-config.xml
	var realms=dojo.query("realm", menuDoc); //menuDoc == null returns empty array
	for(var i=0; i<realms.length; i++) {
	  var realm=realms[i];
	  //var aaa = dojo.byId("[id]", realm);
	  var realmId=dojo.attr(realm,"id");
	  var realmName=dojo.attr(realm,"name");
	  var realmUrl=dojo.attr(realm,"url");
	  
//	  alert(realmId);
//	  alert(realmName);
//	  alert(realmUrl);
	  
	  var menuBarItem = new dijit.MenuBarItem({
	    label: realmName,
	    style: "color:red;font-weight:bold;",
	    onClick: function(evt) { //Click to take user to the Realm page
	      this.set("style","color:purple;font-weight:bold;text-decoration:underline;");
	      var realm=this.get("realmKey"); // get saved node
	      var configXmlMenuRealm=new common.clazz.ConfigXmlMenuRealm(realm);
	      var realmHtmlHref=configXmlMenuRealm.realmHtmlHref();
	      var realmXmlHref=configXmlMenuRealm.realmXmlHref();
	      configXmlMenuRealm.setupRealmMenu();
	    }
	  });
	  menuBarItem.set("realmKey", realm); //save node
	  menuBar.addChild(menuBarItem);
    }
    //menuBar.placeAt("appHeader");
    //menuBar.startup();
    resize();
  }
});

/**
 * 1) Provides node access to a Realm.
 * 2) Setup navigation menu for a given Realm.
 */
dojo.declare("common.clazz.ConfigXmlMenuRealm",null,{

/** 
 * A configXmlMenuRealmNode example. The element is taken from an element from menu-config.xml
 * <realm id="grasshopper" name="Grasshopper" url="pages/realm/grasshopper/" />
 * Important: pages/ is immediately below the webcontext. 
 */
  configXmlMenuRealmNode: null,

  constructor: function(config_xml_menu_realm_node){
	  configXmlMenuRealmNode=config_xml_menu_realm_node;
  },
  realmUrl: function(){
	return dojo.attr(configXmlMenuRealmNode,"url"); //eg. pages/realm/grasshopper/
  },
  realmHtml: function(){
	return dojo.attr(configXmlMenuRealmNode,"id")+".html";
  },
  realmXml: function(){
	return dojo.attr(configXmlMenuRealmNode,"id")+".xml";
  },
  realmCss: function(){
	return dojo.attr(configXmlMenuRealmNode,"id")+".css";
  },
  realmHtmlHref: function(){ //eg. pages/realm/grasshopper/grasshopper.html
	return this.realmUrl()+this.realmHtml();
  },
  realmXmlHref: function(){ //eg. pages/realm/grasshopper/grasshopper.xml
	return this.realmUrl()+this.realmXml(); 
  },
  realmXmlCss: function(){ //eg. pages/realm/grasshopper/css/grasshopper.css
	return this.realmUrl()+"css/"+this.realmCss(); 
  },
  setupRealmMenu: function(){
	var realmTopicMenu=new common.clazz.RealmTopicMenu(this);
	realmTopicMenu.loadMenu();
  }
});

//********* Individual Realm xml menu ********
//Note: each Realm xml menu resides in their own directory

/**
 * Provides node access to <realm>.xml
 */
dojo.declare("common.clazz.RealmXmlNode",null,{

/** 
 * A realmXmlNode example. 
 * The element is taken from a specific Realm: eg. pages/realm/grasshopper/grasshopper.xml
 * <realm id="grasshopper" name="Grasshopper">
 *   <gui-menu appStockWidjitId="appTabContainer" />
 *   <topic id="thicker-skin" name="Thicker Skin" />
 *   <topic id="self-control" name="Self Control" />
 * </realm>
 */
  realmXmlNode: null,

  constructor: function(realm_xml_node){
	  realmXmlNode=realm_xml_node;
  },
  id: function(){
	return dojo.attr(realmXmlNode,"id");
  },
  name: function(){
	return dojo.attr(realmXmlNode,"name");
  },
  guiMenu: function(){
	return dojo.query("menu-gui",realmXmlNode);
  },
  appStockRealmContainerId: function(){
	return dojo.attr(this.guiMenu()[0],"appStockRealmContainerId");
  },
  topicNodes: function(){
	return dojo.query("topic",realmXmlNode);
  }
});

/**
 * Setup Topic(s) navigation and content(s) for a given Realm.
 */
dojo.declare("common.clazz.RealmTopicMenu",null,{
  
  configXmlMenu: null,// common.clazz.ConfigXmlMenu
  realmXmlHref: null, //eg. pages/realm/grasshopper/grasshopper.xml
  
  constructor: function(config_xml_menu){
	configXmlMenu=config_xml_menu;
	realmXmlHref=configXmlMenu.realmXmlHref();
  },
  loadMenu: function(){
	var realmMenuReader=new common.clazz.XmlReader(realmXmlHref);
	realmMenuReader.loadThenCallback(this.processLoadedData);
  },
  processLoadedData: function(loadedData){
	  
	//Dynamically load the realm's css
	var realmCssHref = configXmlMenu.realmXmlCss();
	//console.log(realmCssHref);
	
	//TODO load the css
	var cssNode = document.createElement('link');
	cssNode.type = 'text/css';
	cssNode.rel = 'stylesheet';
	cssNode.href = realmCssHref;
	cssNode.media = 'screen';
	cssNode.title = 'dynamicLoadedSheet';
	document.getElementsByTagName("head")[0].appendChild(cssNode);
	
	
	
	  
	var realmXmlNode = new common.clazz.RealmXmlNode(loadedData);
	
	//Locate the stock Realm container widjit to house the Realm Topic(s).
    var appStockRealmContainerId=realmXmlNode.appStockRealmContainerId();
    var appStockRealmContainer = dijit.byId(appStockRealmContainerId);
    appStockRealmContainer.destroyDescendants(); //Clean all contents

    //Get the id of the ContentPane that houses the appStockRealmContainer (using naming convention)
    //and select this as the active item on the application's StackContainer.
    //The arrangement is as follows on the main html:
    //<div id="appRealmStackContainer" dojoType="dijit.layout.StackContainer" >
    //  <div id="appRealmXYZContainerParent" dojoType="dijit.layout.ContentPane" title="Stack 1">
    //    <div id="appRealmXYZContainer" dojoType="dijit.layout.XYZContainer" ... />
    //  </div>
    //</div>
    //The naming convention: 
    //  ContentPane id = "appRealmXYZContainer" + "Parent" = "appRealmXYZContainerParent"
    var appStockRealmContainerParentId=appStockRealmContainerId+"Parent"; //Get id by naming convention. 
    dijit.byId("appRealmStackContainer").selectChild(appStockRealmContainerParentId);
    
    
    //Locate the content (files) of all the Topics in this Realm and load them onto screen.
    var topicNodes=realmXmlNode.topicNodes();
	for(var i=0; i<topicNodes.length; i++) {
	  var topicNode=topicNodes[i];
      var topicId=dojo.attr(topicNode,"id");
      var topicName=dojo.attr(topicNode,"name");
      var topicContentPane = new dijit.layout.ContentPane({ // to house the Topic page
          title: topicName
      });
      //Load the individual Topic content onto screen
      var realmTopicContent=new common.clazz.RealmTopicContent(configXmlMenu.realmUrl(), topicNode, topicContentPane);
      realmTopicContent.loadTopicContent();
      appStockRealmContainer.addChild(topicContentPane); //add Topic content to the active Realm container widjit.
    }
  }
});

/**
 * A Realm has many Topics.
 * This class loads the ultimate Content one Topic within a given Realm.
 */
dojo.declare("common.clazz.RealmTopicContent",null,{
  
  realmUrl: null, //eg. pages/realm/grasshopper/
  realmTopicNode: null, //eg. <topic id="self-control" name="Self Control" />
  contentPane: null, // dijit.layout.ContentPane to house the Topic page
  
  constructor: function(realm_url, realm_topic_node, content_pane){
	realmUrl=realm_url;
    realmTopicNode=realm_topic_node;
    contentPane=content_pane;
  },
  realmTopicXmlHref: function(){
	var realmTopicId=dojo.attr(realmTopicNode,"id");
    var href=realmUrl+"topic/"+realmTopicId+"/"+realmTopicId+".xml";
    //console.log(href);
    return href;
  },
  loadTopicContent: function(){
    contentPane.setHref(this.realmTopicXmlHref());
  }
});